<template>
  <!-- 标题 -->
  <van-nav-bar title="登录" left-text="" left-arrow @click-left="$router.push('/')" />

  <!-- 表单 -->
  <van-form>
    <!-- 卡片式输入框 -->
    <van-cell-group inset class="form">
      <van-field
        v-model="userName"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <!-- 登录按钮 -->
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit" class="zc" @click="login()">
        去登录
      </van-button>
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        class="zc2"
        @click="$router.push('/reg')"
      >
        去注册
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from "vue"
import { userloginRequest } from "@/api/user"
import { useRouter } from "vue-router"
let router = useRouter()
// 名字和密码
let userName = ref("")
let password = ref("")

// 登录
function login() {
  userloginRequest(userName.value, password.value).then((r) => {
    console.log(r.data)
    if (r.data.code == 1) {
      showSuccessToast("登录成功")
      localStorage.setItem("user-token", r.data.data)
      localStorage.setItem("user-Name", userName.value)
      localStorage.setItem("password", password.value)
      router.push("/")
    } else {
      showFailToast("用户名或密码错误")
    }
  })
}
</script>

<style lang="css" scoped>
.form {
  margin-top: 40px;
}
.zc {
  margin-top: 40px;
}
.zc2 {
  margin-top: 20px;
}
</style>
